<template>
  <div class="content">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div class="step-holder">
        <el-steps :active="orderInfo.status + 1">
          <el-step title="待付款" :description="orderInfo.createTime" />
          <el-step title="待发货" :description="orderInfo.paymentTime" />
          <el-step title="已发货" :description="orderInfo.deliveryTime" />
          <el-step title="已完成" :description="orderInfo.receiveTime" />
          <el-step title="已关闭" :description="orderInfo.finishTime" />
        </el-steps>
      </div>

      <ul class="list">
        <li class="item">
          <div class="title-holder">
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <span>订单信息：</span>
                <el-tag
                  v-if="orderInfo.status === 0"
                  type="danger"
                  effect="dark"
                >
                  待付款
                </el-tag>
                <el-tag
                  v-if="orderInfo.status === 1"
                  type="warning"
                  effect="dark"
                >
                  待发货
                </el-tag>
                <el-tag v-if="orderInfo.status === 2"> 已发货 </el-tag>
                <el-tag v-if="orderInfo.status === 3" effect="dark">
                  已完成
                </el-tag>
                <el-tag v-if="orderInfo.status === 4" type="info" effect="dark">
                  无效订单
                </el-tag>
              </el-col>
            </el-row>
          </div>

          <div class="content-holder">
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                订单金额：<span class="price">{{ orderInfo.totalAmount }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                订单编号：<span>{{ orderInfo.orderSn }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                用户账号：<span>{{ orderInfo.memberUsername }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                备注：<span>{{ orderInfo.note }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                下单时间：<span>{{ orderInfo.createTime }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                付款时间：<span>{{ orderInfo.paymentTime }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                发货时间：<span>{{ orderInfo.deliveryTime }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                收货时间：<span>{{ orderInfo.receiveTime }}</span>
              </el-col>
            </el-row>
          </div>
        </li>
        <li class="item">
          <div class="title-holder">
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <span>收货人信息：</span>
              </el-col>
            </el-row>
          </div>
          <div class="content-holder">
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                收货人：<span>{{ orderInfo.receiverName }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                用户姓名：<span>{{ orderInfo.memberUsername }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                手机号码：<span>{{ orderInfo.receiverPhone }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                邮政编码：<span>{{ orderInfo.receiverPostCode }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                地市：<span>{{ orderInfo.receiverProvince }}{{ orderInfo.receiverRegion
                }}{{ orderInfo.receiverCity }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                详细地址：<span>{{ orderInfo.receiverDetailAddress }}</span>
              </el-col>
            </el-row>
          </div>
        </li>
        <li class="item">
          <div class="title-holder">
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <span>订单商品：</span>
              </el-col>
            </el-row>
          </div>
          <div class="content-holder">
            <!-- 商品展示表格 -->
            <el-table :data="orderItems" border style="width: 100%">
              <el-table-column fixed="left" type="index" label="#" width="50" />
              <el-table-column
                prop="productName"
                label="商品名称"
                width="200"
              />
              <el-table-column label="商品图片" width="200">
                <template slot-scope="scope">
                  <img class="image" :src="scope.row.productPic" alt="">
                </template>
              </el-table-column>
              <el-table-column label="是否退货" width="200">
                <template slot-scope="scope">
                  <p v-if="scope.row.isReturn === 0">否</p>
                  <p v-if="scope.row.isReturn === 1">是</p>
                </template>
              </el-table-column>
              <el-table-column prop="productBrand" label="品牌" width="200" />
              <el-table-column
                prop="productPrice"
                label="商品价格"
                width="200"
              />
              <el-table-column
                prop="productQuantity"
                label="商品数量"
                width="200"
              />
              <el-table-column
                fixed="right"
                prop="totalPrice"
                label="小计"
                width="200"
              />
            </el-table>
          </div>
        </li>
        <li class="item">
          <div class="title-holder">
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <span>费用信息：</span>
              </el-col>
            </el-row>
          </div>
          <div class="content-holder">
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                运费金额：<span class="price">{{
                  orderInfo.freightAmount
                }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                订单总金额：<span class="price">{{
                  orderInfo.totalAmount
                }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                实际金额：<span class="price">{{ orderInfo.payAmount }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                促销优化金额：<span class="price">{{
                  orderInfo.couponAmount
                }}</span>
              </el-col>
            </el-row>
          </div>
        </li>
      </ul>

      <div v-if="orderInfo.status === 1" class="status-box status1">
        <el-form ref="sendForm" size="mini" :model="sendInfo" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="快递公司" prop="deliverySn">
                <el-select v-model="sendInfo.deliveryCompany" placeholder="请选择快递公司">
                  <el-option
                    v-for="item in companyOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="快递单号" prop="deliverySn">
                <el-input v-model="sendInfo.deliverySn" placeholder="请输入快递单号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" :offset="7">
              <el-form-item>
                <el-button type="primary" @click="sendOrder">确认发货</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div v-if="orderInfo.status === 2||orderInfo.status === 3" class="status-box status2">
        <div class="title-holder">
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <span>物流信息：</span>
              <span style="color:gray">{{ orderInfo.deliveryCompany }}[{{ orderInfo.deliverySn }}]</span>
            </el-col>
          </el-row>
        </div>

        <template>
          <el-table
            class="table"
            :data="deliveryList"
            stripe
            border
            style="width: 100%"
          >
            <el-table-column
              prop="time"
              label="时间"
              width="250"
            />
            <el-table-column
              prop="status"
              label="状态"
            />
            <el-table-column
              prop="note"
              label="备注"
              width="250"
            />
          </el-table>
        </template>
        <el-row :gutter="20">
          <el-col :span="5" :offset="10" style="margin-top:20px">
            <el-button v-if="orderInfo.status === 3" type="primary" size="default" class="close-btn" @click="closeOrder">关闭订单</el-button>
            <el-button v-if="orderInfo.status === 2&&isAllReturn" type="primary" size="default" class="close-btn" @click="forceReturn">强制收货</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { requestOrderInfo, sendDone, finishOrder, receiveProductsForce } from '@/api/order'
export default {
  data() {
    return {
      id: this.$route.params.id,
      orderInfo: {},
      orderItems: [],
      sendInfo: {
        deliveryCompany: '',
        deliverySn: ''
      },
      isAllReturn: false,
      deliveryList: [{
        time: '2015-03-06 21:16:58',
        status: '深圳市横岗速递营销部已收件',
        note: '揽投员姓名：钟定基;联系电话：13883838888'
      },
      {
        time: '2015-03-07 14:25:00',
        status: '离开深圳市 发往广州市',
        note: ''
      },
      {
        time: '2015-03-08 00:17:00',
        status: '到达广东速递物流公司广航中心处理中心（经转）',
        note: ''
      },
      {
        time: '2015-03-08 01:15:00',
        status: '离开广州市 发往北京市（经转）',
        note: ''
      },
      {
        time: '2015-03-09 09:01:00',
        status: '到达北京黄村转运站处理中心（经转）',
        note: ''
      },
      {
        time: '2015-03-09 18:39:00',
        status: '离开北京市 发往呼和浩特市（经转）',
        note: ''
      },
      {
        time: '2015-03-10 18:06:00',
        status: '到达 呼和浩特市 处理中心',
        note: ''
      },
      {
        time: '2015-03-11 09:53:48',
        status: '呼和浩特市邮政速递物流分公司金川揽投部安排投递',
        note: '投递员姓名：安长虹;联系电话：18047140142'
      }],
      companyOptions: ['顺丰快递', '中国邮政', '韵达快递', '申通快递', '中通快递'],
      rules: {
        deliveryCompany: [
          { required: true, message: '请选择快递公司', trigger: 'blur' }
        ],
        deliverySn: [
          { required: true, message: '请输入快递单号', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 强制收货
    forceReturn() {
      receiveProductsForce(this.id).then(res => {
        console.log(res)
        if (res.code === 20000) {
          this.$message({
            message: '强制收货成功',
            type: 'success'
          })
          this.$router.go(-1)
        } else {
          this.$message({
            message: '强制收货失败',
            type: 'error'
          })
        }
      })
    },
    getData() {
      requestOrderInfo(this.id).then((res) => {
        console.log(res)
        this.orderInfo = res.data.orderDetail.orderBase
        this.orderItems = res.data.orderDetail.orderItems
        this.isAllReturn = this.orderItems.every(val => val.isReturn === 1)
      })
    },
    // 关闭订单
    closeOrder() {
      finishOrder(this.id).then(res => {
        console.log(res)
        if (res.code === 20000) {
          this.$message({
            message: '关闭订单成功',
            type: 'success'
          })
          this.$router.go(-1)
        } else {
          this.$message({
            message: '关闭订单失败',
            type: 'error'
          })
        }
      })
    },
    // 确认发货
    sendOrder() {
      const data = Object.assign({ orderId: this.id }, this.sendInfo)
      sendDone(data).then(res => {
        console.log(res)
        if (res.code === 20000) {
          this.$message({
            message: '发货成功',
            type: 'success'
          })
          this.$router.go(-1)
        } else {
          this.$message({
            message: '发货失败',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .step-holder {
    margin: 0 auto;
    width: 90%;
  }

  .list {
    .item {
      border-top: 1px solid #dcdfe6;
      padding: 20px 0;
      font-size: 14px;

      .price {
        color: #f00;
      }

      .el-col {
        margin-bottom: 20px;
      }
      .title-holder {
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: 700;

        span {
          font-weight: 600;
        }
      }
      .image {
        width: 100px;
        height: 100px;
      }
    }
  }

  .status-box {
    margin: 0 40px;
    font-size: 14px;
    .title-holder {
      padding: 20px 0;
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: 700;

        span {
          font-weight: 600;
        }
      }
  }

  .status-box.status2{
     border-top: 1px solid #dcdfe6;

  }
}
</style>
